import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import TabNavigator from './TabNavigator';
import NewsDetailScreen from '../screens/NewsDetailScreen';
import PomodoroTimerScreen from '../screens/PomodoroTimerScreen';
import SettingsScreen from '../screens/SettingsScreen';
import TimerSettingsScreen from '../screens/TimerSettingsScreen';
import { RootStackParamList } from '../types';
import { useAppContext } from '../context/AppContext';
import { useTheme } from '../context/ThemeContext';
import { getNavigationTheme } from './NavigationTheme';

const Stack = createNativeStackNavigator<RootStackParamList>();

const RootNavigator: React.FC = () => {
  const { state } = useAppContext();
  const { theme, isDark } = useTheme();
  
  // 根据主题状态选择导航主题
  const navigationTheme = getNavigationTheme(isDark);
  
  return (
    <NavigationContainer theme={navigationTheme}>
      <Stack.Navigator
        screenOptions={{
          headerShown: false, // 隐藏Stack导航的头部，使用Tab导航的头部
          headerStyle: {
            backgroundColor: theme.surface,
          },
          headerTintColor: theme.text,
          headerTitleStyle: {
            fontWeight: 'bold',
            color: theme.text,
          },
        }}
      >
        <Stack.Screen name="MainTabs" component={TabNavigator} />
        <Stack.Screen 
          name="NewsDetail" 
          component={NewsDetailScreen}
          options={{
            headerShown: false,
          }}
        />
        <Stack.Screen 
          name="PomodoroTimer" 
          component={PomodoroTimerScreen}
          options={{
            headerShown: true,
            title: '🍅 番茄时钟',
            headerStyle: {
              backgroundColor: theme.surface,
            },
            headerTintColor: theme.text,
            headerTitleStyle: {
              fontWeight: 'bold',
              color: theme.text,
            },
          }}
        />
        <Stack.Screen 
          name="Settings" 
          component={SettingsScreen}
          options={{
            headerShown: true,
            title: '⚙️ 设置',
            headerStyle: {
              backgroundColor: theme.surface,
            },
            headerTintColor: theme.text,
            headerTitleStyle: {
              fontWeight: 'bold',
              color: theme.text,
            },
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default RootNavigator;